<template>
  <div class="msite">
    <van-swipe class="care" :autoplay="3000">
      <van-swipe-item>
        <img src="./images/care.png" style="width: 100%" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="./images/care1.jpg" style="width: 100%" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="./images/care2.png" style="width: 100%" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="./images/care.png" style="width: 100%" />
      </van-swipe-item>
    </van-swipe>
    <!--首页头部-->
    <MHeaderTop>
      <span class="header_search" slot="left_f">
        <i class="iconfont icon-soushuo"></i>
      </span>
    </MHeaderTop>
    <!--首页附近商家-->
    <div class="msite_shop_list">
      <router-link to="/registration">
        <el-tag>
          <img src="./images/jiankang.svg" class="img_svg" />
          <span class="list_first">健康管理</span>
        </el-tag>
      </router-link>
      <router-link to="/health" class="link_to_food">
        <el-tag type="success">
          <img src="./images/yangsheng.svg" class="img_svg" />
          <span class="list_first">养生知识</span>
        </el-tag>
      </router-link>
      <router-link to="/community" class="link_to_food">
        <el-tag type="info">
          <img src="./images/shequ.svg" class="img_svg" />
          <span class="list_first">社区服务</span>
        </el-tag>
      </router-link>
      <router-link to="/phone" class="link_to_food">
        <el-tag type="warning">
          <img src="./images/bohao.svg" class="img_svg" />
          <span class="list_first">紧急拨号</span>
        </el-tag>
      </router-link>
    </div>
    <div class="shop_header">
      <div class="shop_top">
        <i class="hearder_line"></i>
        <span class="shop_title">为您推荐</span>
        <span class="shop_title1">更多></span>
      </div>
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <CardList />
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
import MHeaderTop from "@/components/MHeaderTop/MHeaderTop.vue";
import CardList from "@/components/CardList/CardList.vue";
import { mapState } from "vuex";
export default {
  data() {
    return {
      bg: {
        backgroundImage: "url(" + require("./images/care.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
      },
      isLoading: false,
    };
  },
  computed: {
    ...mapState(["List"]),
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoading = false;
      }, 1000);
    },
  },
  components: {
    MHeaderTop,
    CardList,
  },
};
</script>
<style lang="stylus" rel="stylesheet/style">
@import '../../common/stylus/mixins.styl';

&.msite { // 首页
  width: 100%;
  padding-bottom :50px;

  .header_search {
    width: 5%;

    .icon-soushuo {
      font-size: 17px;
      color: #656262;
    }
  }
  .img{
    background-size:100% 100%;
  }

  .care {
    width 100%
    height: 200px;
  }


  .msite_shop_list {
    margin-top: 10%;
    background: #fff;
    width: 100%;
    height: 90px;
    border-radius: 15px;
    .el-tag {
      margin-top 10px
      // background-color: #ecf5ff;
      // border-color: #d9ecff;
      display: flex;
      flex: 1;
      flex-direction: column;
      width: 25%;
      height: 70px;
      float: left;
      padding: 0 10px;
      line-height: 30px;
      font-size: 12px;
      color: #409EFF;
      border-width: 1px;
      border-style: solid;
      border-radius: 4px;
      /* -webkit-box-sizing: border-box; */
      box-sizing: border-box;
      white-space: nowrap;
    }
    .img_svg{
    width: 6em;
    height: 3em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    margin-top: 5px;
    }
    .list_first{
      margin-left: 12px;
    }
    .icon {
      width: 6em;
      height: 3em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
      margin-top 5px
    }
  }
  .shop_header{
    margin-top 10px
    width 100%
    height 100%
    background-color #fff
    .shop_top{
      height 35px
      .hearder_line{
      display: inline-block;
      margin-left: 2px;
      width: 5px;
      height: 15px;
      background-color: #ff8700e8;
    }
    .hearder_line,
    .shop_title{
      margin-top 10px
    }
    .shop_title1{
      float:right;
      margin-right:10px;
      margin-top 10px
    }
    }
  }
}
 .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
</style>
